<template>
  <div :style="{height: height}" ref="ElevatorContentRef" class="ElevatorContent" @scroll="handleScrolling">
    <div v-for="(item,index) in list" :key="item + index" :ref="item+'Ref'">
      <slot :name="item"></slot>
    </div>
  </div>
</template>

<script>
import typeOfUtils from '../../utils/type-of-utils';
import htmlElementUtils from '../../utils/htmlElementUtils';
import anime from 'animejs/lib/anime.es.js';

export default {
  name: 'Elevator',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    height: {
      type: String,
      default: '',
      // required: true
    },
    duration: {
      type: String,
      default: '500',
    },
    easing: {
      type: String | Function,
      default: 'easeInOutQuad',
    },
    scrollName: {
      type: String,
      default: '',
    },
    byToName: {
      type: String,
      default: 'id',
    },
  },
  computed: {
    windowHeight() {
      let dom = undefined;
      if (this.byToName === 'id') {
        dom = document.getElementById(this.scrollName);
      } else {
        dom = document.getElementsByClassName(this.scrollName);
      }
      if (dom && typeOfUtils.isArray(dom)) {
        return dom[0];
      } else if (dom && !typeOfUtils.isArray(dom)) {
        return dom
      } else {
        // 浏览器自带滚动条
        return document.documentElement;
      }
    },
  },
  data() {
    return {
      isScroll: false,
    };
  },
  methods: {
    handleNavChange(name) {
      if (!name) {
        return;
      }
      this.isScroll = true;
      const rollWrapper = this.$refs.ElevatorContentRef;
      let sourceNode = this.$refs[name + 'Ref'];
      if (typeOfUtils.isArray(sourceNode)) {
        sourceNode = sourceNode[0];
      }
      const target = sourceNode.$el ? sourceNode.$el : sourceNode;
      anime({
        targets: this.height?[rollWrapper]:[this.windowHeight],
        scrollTop: this.height
          ? htmlElementUtils.elementToTop(target, rollWrapper)
          : htmlElementUtils.elementToTop(target,this.windowHeight),
        complete: () => {
          this.isScroll = false
        },
        easing: this.easing,
        duration: this.duration,
      });
    },
    handleScrolling() {
      if (this.isScroll) return;
      const { list } = this;
      for (let i = 0; i < list.length; i++) {
        const name = list[i];
        let sourceNode = this.$refs[name + 'Ref'];
        if (typeOfUtils.isEmpty(sourceNode)) continue;
        if (typeOfUtils.isArray(sourceNode)) {
          sourceNode = sourceNode[0];
        }
        const target = sourceNode.$el ? sourceNode.$el : sourceNode;
        if(this.height) {
          if (htmlElementUtils.isInContainer(target, this.$refs.ElevatorContentRef)){
            return this.$emit('showValue', name);
          }
        } else {
          if (htmlElementUtils.isInContainer(target, this.windowHeight)){
            return this.$emit('showValue', name);
          }
        }
      }
    }
  },
};
</script>

<style scoped lang="scss">
.ElevatorContent {
  overflow-y: auto;
}
</style>
